import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import { Input, Switch } from 'antd';

import { typeList } from '@/services/common';
import { fieldConfigRules } from './validateRules';

type DataSourceType = {
  id: React.Key;
  sortId?: number;
  label?: string;
  name?: string;
  type?: string;
  isQueryField?: boolean;
  isEdit?: boolean;
  lookupCode?: string;
};
 
const FieldConfig: React.FunctionComponent<any> = forwardRef((props, ref) => {

  const actionRef = useRef<ActionType>();

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<DataSourceType[]>([]);
  const [typeMap, setTypeMap] = useState<any>({});

  // 抛出属性
  useImperativeHandle(ref, () => ({
    getFieldConfigData: getFieldConfigData,

  }));

  useEffect(() => {
    const actTypeMap: any = {};
    typeList.forEach(type => {
      const { value, meaning } = type;
      actTypeMap[value] = { text: meaning };
    });
    setTypeMap(actTypeMap);
  }, []);

  const getFieldConfigData = () => {
    return dataSource;
  };

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '序号',
      dataIndex: 'sortId',
      align: 'center',
      readonly: true,
      width: 80,
    },
    {
      title: '中文描述',
      dataIndex: 'label',
      align: 'center',
      tooltip: '与多语言共同形成field中的label属性',
      renderFormItem: () => <Input placeholder='' />,
    },
    {
      title: '对应字段',
      dataIndex: 'name',
      align: 'center',
      tooltip: 'field中的name属性',
      formItemProps: {
        rules: fieldConfigRules.name,
      },
      renderFormItem: () => <Input placeholder='' />,
    },
    {
      title: '字段类型',
      dataIndex: 'type',
      align: 'center',
      tooltip: 'field中的type属性',
      valueType: 'select',
      valueEnum: typeMap,
      width: 130,
    },
    {
      title: '是否查询条件',
      dataIndex: 'isQueryField',
      align: 'center',
      tooltip: '是查询条件即添加至queryField中',
      valueType: 'switch',
      width: 120,
      formItemProps: {
        valuePropName: 'checked',
      },
      renderFormItem: () => <Switch checkedChildren='是' unCheckedChildren='否' />,
    },
    {
      title: '是否可编辑',
      dataIndex: 'isEdit',
      align: 'center',
      tooltip: '用于生成disabled | edtor',
      valueType: 'switch',
      width: 110,
      formItemProps: {
        valuePropName: 'checked',
      },
      renderFormItem: () => <Switch checkedChildren='是' unCheckedChildren='否' />,
    },
    {
      title: '独立值集编码',
      dataIndex: 'lookupCode',
      align: 'center',
      tooltip: 'field中的lookupCode属性',
      formItemProps: {
        rules: fieldConfigRules.lookupCode,
      },
      renderFormItem: () => <Input placeholder='' />,
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      width: 100,
      render: () => {
        return null;
      }
    },
  ];
  
  return (
    <>
      <EditableProTable<DataSourceType>
        rowKey='id'
        actionRef={actionRef}
        columns={columns}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          // 渲染删除操作
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete];
          },
          // 实时保存数据
          onValuesChange: (record, recordList) => {            
            setDataSource(recordList);
          },
          onChange: setEditableRowKeys,
        }}
        // 默认新建按钮
        recordCreatorProps={{
          newRecordType: 'dataSource', // 添加这个属性之后才可以同时新建多行
          record: (index) => {            
            return { id: Date.now(), sortId: index + 1, type: 'string' }
          },
          creatorButtonText: '字段配置',
        }}
      />
    </>
  );
})
 
export default FieldConfig;
